<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>6-1二维变形</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>
        h3{
            /*position: static;*/
            /*z-index: 3;*/
        }
        div{
            width:300px;
            height:180px;
            padding: 20px;
            margin: 36px 30px;
            border:20px solid;
            display: inline-block;
            color: #fff;
            text-shadow: 1px 1px 2px black;
            font-family: 微软雅黑;
            font-weight: bold;
            vertical-align: top;
            background: url("../05backgroundAndBorder/redBgFlower.jpg") 0 5% repeat-x, url("../05backgroundAndBorder/blackCat.jpg") center bottom no-repeat, linear-gradient(to bottom, #5964ae 0% , #557eff 25%, #f0d187 61.8%,#91a200 80%, green 95%);
            background-size: 10%,40%,100%;
            border-image: url("../05backgroundAndBorder/borderImg.png") 20  repeat;
            background-origin: padding-box;
        }
        div code{
            display: block;
            font-size: 12px !important;
            /*min-font-size: 6px;*/
            font-weight: normal;
            text-shadow: none;
        }

        #transform2D div:nth-child(2){
            transform: rotate(45deg);
        }
        #transform2D div:nth-child(3){
            transform: scale(0.7,1.3);
        }
        #transform2D div:nth-child(4){
            transform: skew(30deg);
        }
        #transform2D div:nth-child(5){
            transform: skew(0deg,30deg);
        }
        #transform2D div:nth-child(6){
            transform: skew(30deg,-15deg);
        }
        #transform2D div:nth-child(7){
            transform: translate(150px,25px);
        }

        #orderTo2D div:nth-of-type(1){
            transform: translate(150px,200px) rotate(30deg) scale(1.5);
        }
        #orderTo2D div:nth-of-type(2){
            transform: scale(1.5) rotate(30deg) translate(150px,200px);
        }
        #originH3{
            margin-top: 500px;
        }
        #origin div{
            transform: rotate(30deg);
        }
        #origin div:nth-of-type(1){
            transform: rotate(0deg);
        }
        #origin div:nth-of-type(2){
        }
        #origin div:nth-of-type(3){
            transform-origin: left top;
        }
    </style>
</head>
<body>
<h1>6-1二维变形</h1>
<h3>二维变形</h3>
<section id="transform2D">
    <div><br>用来变形的样本</div>
    <div><code>transform: rotate(45deg);</code><br>旋转45度</div>
    <div><code>transform: scale(0.7,1.3);</code><br>scale(0.7,1.3)水平缩放到0.7倍，垂直缩放到1.3倍</div>
    <div><code>transform: skew(30deg);</code><br>skew(30deg)水平扭曲30度</div>
    <div><code>transform: skew(0deg,30deg);</code><br>skew(0deg,30deg)垂直扭曲30度</div>
    <div><code>transform: skew(30deg,-15deg);</code><br>skew(30deg,-15deg)水平扭曲30度，垂直都扭曲-15度</div>
    <div><code>transform: translate(150px,25px);</code><br>translate(150px,25px)水平移动150px,垂直移动25px</div>
</section>

<h3>二维变形命令顺序的影响</h3>
<section id="orderTo2D">
    <strong>顺序不一样导致结果不一样的原因是，旋转后元素的x轴和y轴的方向会跟随元素本身转动，而不是水平和垂直方向了</strong>
    <br>
    <div><code>transform: translate(150px,200px)
        rotate(30deg) scale(1.5);</code><br>先平移，在旋转，最后放大</div>

    <br>
    <div><code>transform: scale(1.5) rotate(30deg)
        translate(150px,200px);</code><br>先放大，在旋转，最后平移</div>
</section>

<h3 id="originH3">指定变形的基准点</h3>
<section id="origin">
    <div><br><code>transform: rotate(0deg)</code>不旋转</div><br>
    <div><br><code>transform: rotate(30deg)</code>以默认中心为基准旋转</div><br>
    <div><br><code>transform-origin: left top;<br>transform: rotate(30deg)</code>以左上角为基准旋转</div>
</section>

</body>
</html>